<html>
<head></head>
<body>
<div id='e' style='border:1px solid;width:100px;height:100px;position:relative;'></div>
<button id='b'>取消执行动画</button><br>
<button id='c'>执行动画</button>
<script>
    //用来兼容不同浏览器
    //我在deepin chrome63测试，发现requestAnimationFrame和webkitRequestAnimationFrame都支持，mozRequestAnimationFrame不支持
    window.requestAnimat = (function(){
        return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame  ||
            window.mozRequestAnimationFrame || function(callback){
                setTimeout(callback,1000/60);
            }
    })();
    let e = document.getElementById('e'),b=document.getElementById('b'),c=document.getElementById('c');
    //便宜量
    let left = 0;
    //正反向
    let flag = true;
    let ret = 0;
    //渲染方法
    function render(){
        if(flag){
            e.style.left = `${left++}`;
            if(left == 100)flag = false;
        }else{
            e.style.left = `${left--}`;
            if(left == 0)flag = true;
        }
    }

    function loopAnim(){
        render();
        ret = requestAnimat(loopAnim);
    };
    //在点了多次c之后，动画速度比较快的情况下点b，则动画效果一点点减慢直到停止
    b.onclick = function(){
        window.cancelAnimationFrame(ret);
    };
    //如果一直点c，动画会越来越快
    c.onclick = function(){
        loopAnim();
    };
    (loopAnim())();
</script>
</body>
</html>